<!-- COMMON -->

<div id="error_modal" class="modal hide fade">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <p class="modal-msg"></p>
   </div>
</div>

<div id="message_modal" class="modal hide fade">
    <div class="modal-body">
        <p class="modal-msg"></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    </div>
</div>

<div id="progress_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-body">
        <p><i class="icon-spinner icon-spin"></i><span class="modal-msg"></span>...</p>
    </div>
</div>

<div id="confirm_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-body">
        <p class="modal-msg"></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button class="btn btn-primary">Delete</button>
    </div>
</div>

<div id="opt_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-body">
        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#opt_display_tab" data-toggle="tab">Display</a></li>
            <li><a href="#opt_sharing_tab" data-toggle="tab">Sharing</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="opt_display_tab">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">StoryMap Size</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Width</span>
                                <input type="text" id="width" value="" class="input-mini">
                            </div>
                             <div class="input-prepend">
                                <span class="add-on">Height</span>
                                <input type="text" id="height" value="" class="input-mini">
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Language</label>
                        <div class="controls">
                            <select id="language">
                                <option value="en" data-lang="English">English</option>
                                <option value="cs" data-lang="Czech">Čeština</option>
                                <option value="de" data-lang="German">Deutsch</option>
                                <option value="et" data-lang="Estonian">Eesti</option>
                                <option value="es" data-lang="Spanish">Español</option>
                                <option value="el" data-lang="Greek">Ελληνικά</option>
                                <option value="fr" data-lang="French">Français</option>
                                <option value="he" data-lang="Hebrew">עִברִית</option>
                                <option value="is" data-lang="Icelandic">Íslenska</option>
                                <option value="it" data-lang="Italian">Italiano</option>
                                <option value="hu" data-lang="Hungarian">Magyar</option>
                                <option value="nl" data-lang="Dutch">Nederlands</option>
                                <option value="no" data-lang="Norwegian">Norsk</option>
                                <option value="nn" data-lang="Norwegian Nynorsk">Nynorsk</option>
                                <option value="pl" data-lang="Polish">Polski</option>
                                <option value="pt" data-lang="Portuguese">Português</option>
                                <option value="ru" data-lang="Russian">Русский язык</option>
                                <option value="sr" data-lang="Serbian">Srpski</option>
                                <option value="sk" data-lang="Slovak">Slovenčina</option>
                                <option value="sv" data-lang="Swedish">Svenska</option>
                                <option value="tr" data-lang="Turkish">Türkçe</option>
                                <option value="uk" data-lang="Ukrainian">Українська</option>
                                <option value="be" data-lang="Belarusian">Беларуская</option>
                                <option value="bg" data-lang="Bulgarian">български език</option>
                                <option value="zh-cn" data-lang="Chinese (simplified)">中文</option>
                                <option value="zh-tw" data-lang="Chinese (traditional)">正體中文</option>
                                <option value="jp" data-lang="Japanese">日本語</option>
                                <option value="ko" data-lang="Korean">한국어</option>
                                <option value="ur" data-lang="Urdu">اُردُو</option>
                            </select>
                            <a class="help" href="javascript:"
                                data-placement="left"
                                data-content="Select the language to use in controls and messages when displaying your StoryMap."
                            >&nbsp;<i class="icon-question-sign icon-large"></i></a>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Fonts</label>
                        <div class="controls">
                            <select id="font_css">
                                <option value="">Default</option>
                                <option value="stock:abril-droidsans">Abril Fatface &amp; Droid Sans</option>
                                <option value="stock:amatic-andika">Amatic &amp; Andika</option>
                                <option value="stock:bitter-raleway">Bitter &amp; Raleway</option>
                                <option value="stock:clicker-garamond">Clicker &amp; Garamond</option>
                                <option value="stock:dancing-ledger">Dancing &amp; Ledger</option>
                                <option value="stock:fjalla-average">Fjalla &amp; Average</option>
                                <option value="stock:georgia-helvetica">Georgia &amp; Helvetica</option>
                                <option value="stock:lustria-lato">Lustria &amp; Lato</option>
                                <option value="stock:medula-lato">Medula One &amp; Lato</option>
                                <option value="stock:oldstandard">Old Standard</option>
                                <option value="stock:opensans-gentiumbook">Open Sans &amp; Gentium Book Basic</option>
                                <option value="stock:playfair-faunaone">Playfair &amp; Fauna One</option>
                                <option value="stock:playfair">Playfair SC &amp; Playfair</option>
                                <option value="stock:pt">PT Sans &amp; PT Serif &amp; PT Sans Narrow</option>
                                <option value="stock:roboto-megrim">Roboto Slab &amp; Megrim</option>
                                <option value="stock:rufina-sintony">Rufina &amp; Sintony</option>
                                <option value="stock:unicaone-volkorn">Unica One &amp; Vollkorn</option>
                            </select>
                            <a class="help" href="javascript:"
                                data-placement="bottom"
                                data-html="true"
                                data-content="Select a font-set for your StoryMap. See below for examples of how the fonts look.<br><img style='margin-top: 5px' src='{{ STATIC_URL }}img/font-options.png'>"
                            >&nbsp;<i class="icon-question-sign icon-large"></i></a>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Treat As</label>
                        <div class="controls">
                            <label class="radio inline">
                                <input type="radio" name="map_as_image" value="false" checked>
                                Cartography
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="map_as_image" value="true">
                                Image
                            </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Call To Action</label>
                        <div class="controls">
                            <label class="radio inline">
                                <input type="radio" name="call_to_action" value="true" checked>
                                Yes
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="call_to_action" value="false">
                                No
                            </label>
                            <input type="text" id="call_to_action_text" value="" placeholder="enter text, or use default" class="input-large">
                            <a class="help" href="javascript:"
                                data-placement="left"
                                data-html="true"
                                data-content="Choosing this will show a button on your first slide to lead your readers into the story. You can change the words on the button.<br><img style='margin-top: 5px' src='{{ STATIC_URL }}img/calltoaction.png'>"
                            >&nbsp;<i class="icon-question-sign icon-large"></i></a>
                            <p id="call_to_action_default">Default: "<span id="call_default_text"></span>"</p>
                        </div>
                    </div>
        <!-- map -->
                    <div class="control-group map-control-group">
                        <label class="control-label">Map Type</label>
                        <div class="controls">
                            <select id="map_type_menu" class="span4">
                                <option value="stamen:toner-lite">Stamen Maps: Toner Lite</option>
                                <option value="stamen:toner">Stamen Maps: Toner</option>
                                <option value="stamen:toner-lines">Stamen Maps: Toner Lines</option>
                                <option value="stamen:toner-labels">Stamen Maps: Toner Labels</option>
                                <option value="stamen:toner-background">Stamen Maps: Toner Background</option>
                                <option value="stamen:watercolor">Stamen Maps: Watercolor</option>
                                <option value="osm:standard">Open Street Maps: Standard</option>
                                <option value="mapbox">Mapbox</option>
                                <option value="zoomify">Gigapixel</option>
                                <option value="">custom</option>
                            </select>
                            <a class="help" href="javascript:"
                                data-html="true"
                                data-placement="left"
                                data-content='
                                <p>Select a predefined map type.</p>
                                <p>Select "Mapbox" to enter the ID of your Mapbox map and a
                                <a href="https://www.mapbox.com/help/define-access-token/" target="_blank">public access token</a>.</p>
                                <p>Select "custom" to enter the URL for a tile server.  If the server supports multiple subdomains,
                                enter them as a single string in the Subdomain field (e.g. subdomains "a", "b", and "c" should
                                be entered as "abc").</p>
                                '
                            >&nbsp;<i class="icon-question-sign icon-large"></i>
                            </a>
                        </div>
                    </div>
                    <div class="control-group map-control-group">
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">ID</span>
                                <input id="map_type" type="text" class="span5" placeholder="http://{s}.domain.org/{z}/{x}/{y}.png">
                            </div>
                        </div>
                    </div>
                    <div class="control-group map-control-group">
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Subdomains</span>
                                <input id="map_subdomains" type="text" class="input-small" placeholder="abc">
                            </div>
                        </div>
                    </div>
                    <div class="control-group map-control-group">
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Access Token</span>
                                <input id="map_access_token" type="text" class="span4" placeholder="public access token">
                            </div>
                            <br>
                            <span class="help-inline hide">You must enter your public access token</span>
                        </div>
                    </div>
                    <div class="control-group map-control-group">
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Attribution</span>
                                <input id="attribution" type="text" class="span4">
                            </div>
                        </div>
                    </div>

        <!-- zoomify -->
                    <div class="control-group zoomify-control-group">
                        <label class="control-label">Map Background Color</label>
                        <div class="controls">
                            <input id="map_background_color" type="text" placeholder="#ffffff">
                        </div>
                    </div>
                    <div class="control-group zoomify-control-group">
                        <label class="control-label">Zoomify URL</label>
                        <div class="controls">
                            <input id="zoomify_path" type="text" class="span5" placeholder="http://www.domain.org/directory/">
                            <a class="help" href="javascript:"
                                data-html="true"
                                data-placement="left"
                                data-content='Enter the URL path for your zoomable image folder.'
                            >&nbsp;<i class="icon-question-sign icon-large"></i>
                            </a>
                        </div>
                    </div>

                    <div class="control-group zoomify-control-group">
                        <label class="control-label">Max Image Size</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Width</span>
                                <input type="text" id="zoomify_width" value="" class="input-mini">
                            </div>
                            <div class="input-prepend">
                                <span class="add-on">Height</span>
                                <input type="text" id="zoomify_height" value="" class="input-mini">
                            </div>
                            <br />
                            <span class="note"><i class="icon-warning-sign"></i> Changing the max image size may move the apparent location of your markers.</p>
                        </div>
                    </div>
                    <div class="control-group zoomify-control-group">
                        <label class="control-label">Attribution</label>
                        <div class="controls">
                            <input id="zoomify_attribution" type="text" class="span5">
                        </div>
                    </div>
                    <!-- <div class="control-group zoomify-control-group">
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">Image Directory URL</span>
                                <input id="zoomify_path" type="text" class="span3" placeholder="http://www.domain.org/directory/">
                            </div>
                        </div>
                    </div>
                    <div class="control-group zoomify-control-group">
                      <div class="controls">
                          <div class="input-prepend">
                              <span class="add-on">Width</span>
                              <input type="text" id="zoomify_width" value="" class="input-small">
                          </div>
                           <div class="input-prepend">
                              <span class="add-on">Height</span>
                              <input type="text" id="zoomify_height" value="" class="input-small">
                          </div>
                      </div>
                    </div> -->
                </form>
            </div>
            <div class="tab-pane" id="opt_sharing_tab">
                <label>You can modify how your StoryMap appears as part of a tweet or Facebook share by clicking on the "Share" button at the top right.</label>
                <a id="opt_share" href="javascript:$('#storymap_share').trigger('click');" class="btn btn-primary" >Open Share Settings</a><!-- data-dismiss="modal" -->
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a id="opt_close" href="javascript:;" class="btn btn-primary" >Close</a><!-- data-dismiss="modal" -->
    </div>
    <!-- progress -->
    <div class="modal-progress hide">
        <div>
            <div>
                <i class="icon-spinner icon-4x icon-spin"></i>
                <p><span class="modal-msg"></span>...</p>
            </div>
        </div>
    </div>
</div>

<!-- Editing //-->
<div id="background_opt_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-header">
        <h4>Slide Background</h4>
    </div>
    <div class="modal-body">
        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <p>
        <label><strong>Background Color</strong></label>
        <input id="background_color" type="text" placeholder="#ffffff">
        </p>
        <p>
        <label><strong>Background Image</strong></label>
        <div class="input-prepend" style="width: 96%;">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul id="background_image_select" class="image-select dropdown-menu">
                    <li><a href="javascript:">image 1</a></li>
                    <li><a href="javascript:">image 2</a></li>
                    <li><a href="javascript:">image 3</a></li>

                </ul>
            </div>
            <input type="text" id="background_url" placeholder="<< select an image, or enter an URL">
        </div>
        <p>or upload an image to your StoryMap folder.</p>
        <div class="upload-panel">
            <form class="form-inline">
            <a class="upload-file-link btn" href="javascript:">
            Choose File...
            <input type="file" class="upload-file" accept="image/*" size="40">
            </a>
            &nbsp;<label class="upload-file-name"></label>
            &nbsp;<a href="javascript:" class="btn btn-success upload pull-right">Upload</a>
            </form>
        </div>
        <div class="upload-conflict hide">
            <p class="error">A file with the same name already exists.</p>
            <label class="radio upload-conflict-replace">
                <input type="radio" name="upload_modal_conflict" value="replace">Replace existing file
            </label>
            <div>
            <label class="radio inline upload-conflict-rename">
                <input type="radio" name="upload_modal_conflict" value="rename">Save file as:
                <input class="upload-rename-as" type="text" size="40">
            </label>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<!-- Markers //-->
<div id="marker_opt_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-header">
        <h4>Map Markers</h4>
    </div>
    <div class="modal-body">
        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <label>Select a custom marker to use on this slide, or reset to use the default.</label>
        <div class="input-prepend" style="width: 96%;">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul id="marker_image_select" class="image-select dropdown-menu">
                    <li><a href="javascript:">image 1</a></li>
                    <li><a href="javascript:">image 2</a></li>
                    <li><a href="javascript:">image 3</a></li>
                </ul>
                <input id="marker_url" type="text" class="input-large" placeholder="<< select an image, or enter an URL">
            </div>
        </div>
        <p>or upload an new marker to your StoryMap folder.</p>
        <div class="upload-panel">
            <form class="form-inline">
                <a class="upload-file-link btn" href="javascript:">
                Choose File...
                <input type="file" class="upload-file" accept="image/*" size="40">
                </a>
                &nbsp;<label class="upload-file-name"></label>
                &nbsp;<a href="javascript:" class="btn btn-success upload pull-right">Upload</a>
            </form>
        </div>
        <div class="upload-conflict hide">
            <p class="error">A file with the same name already exists.</p>
            <label class="radio upload-conflict-replace">
            <input type="radio" name="upload_modal_conflict" value="replace">Replace existing file
            </label>
            <div>
                <label class="radio inline upload-conflict-rename">
                <input type="radio" name="upload_modal_conflict" value="rename">Save file as:
                <input class="upload-rename-as" type="text" size="40">
                </label>
            </div>
       </div>
    </div>
    <div class="modal-footer">
        <a id="marker_options_close" href="javascript:;" class="btn btn-primary" data-dismiss="modal">Close</a>
    </div>
    <!-- progress -->
    <div class="modal-progress hide">
        <div>
            <div>
                <i class="icon-spinner icon-4x icon-spin"></i>
                <p><span class="modal-msg"></span>...</p>
            </div>
        </div>
    </div>
</div>

<div id="upload_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-body">
        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <!-- main -->
        <p>Select an image file to upload to your StoryMap folder.</p>
        <div class="upload-panel">
            <form class="form-inline">
            <a class="upload-file-link btn" href="javascript:">
            Choose File...
            <input type="file" class="upload-file" accept="image/*" size="40">
            </a>
            &nbsp;<label class="upload-file-name"></label>
            </form>
        </div>
        <div class="upload-conflict hide">
            <p>A file with the same name already exists.</p>
            <label class="radio upload-conflict-replace">
                <input type="radio" name="upload_modal_conflict" value="replace">Replace existing file
            </label>
            <div>
            <label class="radio inline upload-conflict-rename">
                <input type="radio" name="upload_modal_conflict" value="rename">Save file as:
                <input class="upload-rename-as" type="text" size="40">
            </label>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:;" class="btn" data-dismiss="modal">Cancel</a>
        <a href="javascript:;" id="upload_upload" class="btn btn-primary upload">Upload</a>
    </div>
    <!-- progress -->
    <div class="modal-progress hide">
        <div>
            <div>
                <i class="icon-spinner icon-4x icon-spin"></i>
                <p><span class="modal-msg"></span>...</p>
            </div>
        </div>
    </div>
</div>


<div id="share_modal" class="modal hide fade" data-backdrop="static">
	<div class="modal-header">
		<h4>Share This StoryMap</h4>
	</div>
	<div class="modal-body">

        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <!-- main -->
		<div id="share_publish_panel" class="hide">
			<form class="form-inline">
				<label><i class="icon-warning-sign"></i> You have unpublished changes:</label>
					&nbsp;
				<a id="share_publish" class="btn" href="javascript:;">Publish Changes</a>
			</form>
		</div>
		<div class="share-link-container">
			<div class="share-link">
				<label>Link</label>
				<input type="text" id="share_url" class="stretch" onfocus="this.select();" onmouseup="return false;">
			</div>
			<div class="share-social">
				<label>Social</label>
				<div class="share-social-icons">
					<a class="share-link-twitter" target="_blank" href="#" title="Share on Twitter">
						<i class="icon-twitter icon-2x"></i>
					</a>
					<a class="share-link-facebook" target="_blank" href='#' title="Share on Facebook">
						<i class="icon-facebook-sign icon-2x"></i>
					</a>
					<a class="share-link-googleplus" target="_blank" href='#' title="Share on Google+">
						<i class="icon-google-plus-sign icon-2x"></i>
					</a>
					<a class="share-link-reddit" target="_blank" href="#" title="Share on Reddit">
						<img src="//www.reddit.com/static/spreddit5.gif" />
					</a>
				</div>
			</div>
		</div>
    <div id="oembed-note">
      <p class="note">You can put this link on a line by itself to embed your storymap on <a href="https://medium.com">Medium.com</a> <a href="http://knightlab.northwestern.edu/2016/06/15/knight-lab-tools-now-embeddable-on-medium/" target="_blank"><i class="icon-question-sign icon-large"></i></a></p>
    </div>
		<div class="share-embed-container">
      <div class="tab-pane" id="opt_sharing_tab">
          <p class='note'>
              Set these values to improve how your StoryMap appears as part of a tweet or Facebook share.
          </p>
          <p>
          <label><strong>Description</strong></label>
          <textarea id="share_description" class="stretch" rows="3"></textarea>
          </p>
          <p>
          <label><strong>Featured Image</strong></label>
          <div class="input-prepend" style="width: 96%;">
              <div class="btn-group">
                  <button class="btn dropdown-toggle" data-toggle="dropdown">
                      <span class="caret"></span>
                  </button>
                  <ul id="share_image_select" class="dropdown-menu">
                      <li><a href="javascript:">image 1</a></li>
                      <li><a href="javascript:">image 2</a></li>
                      <li><a href="javascript:">image 3</a></li>
                  </ul>
              </div>
              <input type="text" id="share_image_url" placeholder="<< select an image, or enter an URL">
          </div>
          <p>or upload an image to your StoryMap folder.</p>
          <div class="upload-panel">
              <form class="form-inline">
              <a class="upload-file-link btn" href="javascript:">
              Choose File...
              <input type="file" class="upload-file" accept="image/*" size="40">
              </a>
              &nbsp;<label class="upload-file-name"></label>
              &nbsp;<a href="javascript:" class="btn btn-success upload pull-right">Upload</a>
              </form>
          </div>
          <div class="upload-conflict hide">
              <p class="error">A file with the same name already exists.</p>
              <label class="radio upload-conflict-replace">
                  <input type="radio" name="upload_modal_conflict" value="replace">Replace existing file
              </label>
              <div>
              <label class="radio inline upload-conflict-rename">
                  <input type="radio" name="upload_modal_conflict" value="rename">Save file as:
                  <input class="upload-rename-as" type="text" size="40">
              </label>
              </div>
          </div>
          </p>
      </div>
			<label>Embed</label>
			 <textarea id="share_embed" rows="5" onfocus="this.select();" onmouseup="return false;"></textarea>
			 <div class="share-embed-params">
				  <div class="vco-icon-arrow-up"></div>
				 <div class="controls">
					 <div class="input-prepend">
						 <span class="add-on">Width</span>
						 <input type="text" id="share_width" value="" class="input-mini">
					 </div>
					 <div class="input-prepend">
						 <span class="add-on">Height</span>
						 <input type="text" id="share_height" value="" class="input-mini">
					 </div>
				 </div>
			 </div>
		</div>

	</div>
    <div class="modal-footer">
        <a href="javascript:;" class="btn btn-primary" data-dismiss="modal">Close</a>
    </div>
    <!-- progress -->
    <div class="modal-progress">
        <div>
            <div>
                <i class="icon-spinner icon-4x icon-spin"></i>
                <p><span class="modal-msg"></span>...</p>
            </div>
        </div>
    </div>
</div>

<div id="html_modal" class="modal hide fade" data-backdrop="static">
    <div class="modal-body">
        <!-- error -->
        <div class="modal-error hide">
            <span class="modal-msg error"></span>
        </div>
        <!-- main -->
        <p>Credits and captions accept HTML markup. Here are a few basics.</p>
        <ul>
        <li>Wrap text in <code>&lt;b&gt;&lt;&frasl;b&gt;</code> tags for <b>bold</b> text and <code>&lt;i&gt;&lt;&frasl;i&gt;</code> for <i>italics</i>.</li>
        <li>Wrap text in <code>&lt;a href&#61;"INSERT URL"&gt;&lt;&frasl;a&gt;</code> tags to add a link.</li>
        </ul>
    </div>
    <div class="modal-footer">
        <a href="javascript:;" class="btn" data-dismiss="modal">OK</a>
    </div>
    <!-- progress -->

</div>
